<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我的</title>


    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 10px;
            background-color: #109684;
        }

        h1 {
            text-align: center;
        }

        label {
            color: #15e07b;
        }

        img {
            margin: 10px;
            width: 100%;
            height: auto;
            /* 自适应高度 */
        }

        label {
            font-size: 18px;
            /* 调整字体大小 */
        }

        input {
            height: 15px;
            /* 调整输入框高度 */
            font-size: 15px;
            /* 调整输入框字体大小 */
            padding: 5px;
            margin: 5px 1px;
        }

        button {
            height: 30px;
            /* 调整按钮高度 */
            font-size: 15px;
            /* 调整按钮字体大小 */
        }

        #totalPages {
            height: 30px;
            /* 调整按钮高度 */
            font-size: 15px;
        }

        #uppage,
        #downpage {
            height: 100px;
            width: 200px;
        }
    </style>

</head>

<body>
    <p>
    <h1>我的圖片</h1>
    </p>

    <label for="uid">UID:</label>
    <!-- <input type="text" id="uid"> -->
    <select id="uid">
        <option value="">请选择 UID</option> <!-- 默认空选项 -->
    </select>
    <label for="start">开始页:</label>
    <input type="number" id="start" value="0" min="0">
    <label for="end">页大小:</label>
    <input type="number" id="end" value="10" min="1">
    <button id="fetchData">获取数据</button>
    <div id="totalPages"></div>
    <div id="results"></div>
    <button id="uppage">上一页</button>
    <button id="downpage">下一页</button>

    <script>
         document.addEventListener('DOMContentLoaded',function(){
            const uid= document.getElementById('uid')
            fetch( `http://156.238.249.209:9001/get_uid_list`)
            .then(response => response.json())
            .then(data => {
                data.list.forEach(item=>{
                const option = document.createElement('option');
                option.value = item.uid; // 设置选项的值
                option.textContent = item.uidName; // 显示的文本
                uid.appendChild(option);
                })
            })
            .catch(error => console.error('Error:', error));

         });
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('fetchData').addEventListener('click', search);
            document.getElementById('uppage').addEventListener('click', upPage);
            document.getElementById('downpage').addEventListener('click', downPage);
        });

        function search() {
            const uid = document.getElementById('uid').value;
            const start = document.getElementById('start').value;
            const end = document.getElementById('end').value;
            let url = `http://156.238.249.209:9001/get_images?page=${start}&size=${end}`;
            if (uid) {
                url += `&uid=${uid}`;  // 添加 uid 参数
            }
            fetch(url)  // 替换为你的 Flask API 地址
                .then(response => response.json())
                .then(data => {
                    const resultsDiv = document.getElementById('results');
                    const totalPagesDiv = document.getElementById('totalPages');

                    resultsDiv.innerHTML = '';  // 清空旧数据
                    totalPagesDiv.innerHTML = ''; // 清空旧总页数

                    // 显示总页数
                    totalPagesDiv.innerHTML = `总页数: ${data.total_pages}  总条数: ${data.total}`;

                    // 显示图片数据
                    data.images.forEach(item => {
                        const div = document.createElement('div');
                        img = document.createElement('img');
                        img.src = `./wbdb/${item.pathUrl}`
                        img.alt = item.pathUrl

                        const deleteButton = document.createElement('button');
                        deleteButton.textContent = '删除';
                        deleteButton.value = item.id;

                        // 点击删除按钮的逻辑
                        deleteButton.addEventListener('click', function () {
                            // 弹出确认框
                            const confirmDelete = confirm(`确认删除图片 ID: ${item.id} 吗？`);
                            if (confirmDelete) {
                                // 调用后端接口删除图片
                                fetch(`http://156.238.249.209:9001/delete_image?id=${item.id}`, {
                                    method: 'GET'
                                })
                                    .then(response => {
                                        if (response.ok) {
                                            alert(`图片 ID: ${item.id} 已成功删除`);
                                            div.remove(); // 从页面中移除图片
                                        } else {
                                            alert(`删除失败，错误码: ${response.status}`);
                                        }
                                    })
                                    .catch(error => console.error('Error:', error));
                            }
                        });
                        // 将图片和删除按钮添加到 div 中
                        div.appendChild(img);
                        div.appendChild(deleteButton);
                        resultsDiv.appendChild(div);
                        // div.innerHTML = `<img src='./wbdb/${item.pathUrl}' alt="${item.pathUrl}">`;
                        // resultsDiv.appendChild(div);
                    });
                    window.scrollTo(0, 0);
                })
                .catch(error => console.error('Error:', error));
        }
        function upPage() {
            console.log(111111111111111);
            startInput = document.getElementById("start");
            console.log(startInput.value);
            let currentPage = parseInt(startInput.value);
            if (currentPage > 0) {
                currentPage--;
                document.getElementById('start').value = currentPage
                console.log(`当前页: ${currentPage}`);
                search();
            }
            console.log("第一页");
        }
        function downPage() {
            console.log(22222222222222);
            startInput = document.getElementById("start");
            console.log(startInput.value);
            let currentPage = parseInt(startInput.value);
            if (currentPage >= 0) {
                currentPage++;
                startInput.value = currentPage
                console.log(`当前页: ${currentPage}`);
                search();
            }

        }

    </script>
</body>

</html>